<template>
  <view class="readmore">
    <view :style="cssHeight" class="readmore-text" >
      <text @click="handleOpen" class="readmore-text-open" :style="props.style">
        <text v-if="!isOpen && props.content" class="readmore-text-open-icon">...</text>
        <text v-if="!isOpen && props.content">展开</text>
        <text v-if="isOpen && props.content">收起</text>
      </text>
      <text class="readmore-text-content">
        {{props.content}}
      </text>
    </view>
  </view>
</template>
<script setup>
import {ref,computed} from 'vue'
const isOpen = ref(false);
const props = defineProps({
  content:{
    type:String,
    default:'',
    required:''
  },
  line:{
    type:Number,
    default:2
  },
  style:{
    type:Object,
    default: {
      color:'#9DF3FF'
    }
  }
})
const cssHeight = computed(()=>{
  if(!isOpen.value && props.content){
    return {
      maxHeight:props.line*48 + 'rpx',
      overflow:'hidden'
    }
  }else{
    return {}
  }
})

const handleOpen = ()=>{
  isOpen.value = !isOpen.value;
}
</script>

<style lang="scss" scoped>

.readmore{
  display: flex;
  .ellipsis{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  &-text{
    text-indent:58rpx;
    &-open{
      position: relative;
      top:3rpx;
      text-indent:0;
      float:right;
      clear: both;
      &-icon{
        position: relative;
        padding:0rpx 20rpx 0rpx 0rpx;
        margin-left: -2rpx;
        color:#f2f2f2;
      }
    }
    &-close{

    }
    &:before{
      content:'';
      width:'0rpx';
      height: calc(100% - 40rpx);
      float:right;
    }
    &-content{line-height:1.8;}
  }

}

</style>
